<template>
    <div class="tabs">
        <div class="left"><span>{{ todo.length}} items left</span></div>
        <div class="state">
            <span v-for="state in states"
                  :key="state"
                  :class="['state-item', stateFilter === state ? 'selected' : '']"
                  @click="toggleFilter(state)">
                {{ state }}
            </span>
        </div>
        <div class="clear">
            <span class="pointer" @click="clearAllCompleted">Clear completed</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "todo-content-tabs",
        props: {
            todo: {
                type: Array,
                required: true
            },
            stateFilter: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                states: ['all', 'active', 'completed']
            }
        },
        methods: {
            toggleFilter(state) {
                this.$emit('toggleFilter', state);
            },
            clearAllCompleted() {
                this.$emit('clearAll');
            }
        }
    }
</script>

<style scoped>
    .tabs {
        background: #fff;
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #ccc;
        padding: 0 15px;
        color: #666;
    }

    .left, .state, .clear {
        width: 190px;
        float: left;
    }

    .tabs .state .state-item {
        text-align: center;
        padding: 5px;
        margin-right: 8px;
        cursor: pointer;
    }

    .tabs .clear {
        text-align: right;

    }

    .pointer{
        cursor: pointer;
    }

    .selected {
        border: 1px solid #ff5e56;
        border-radius: 5px;
        font-weight: bold;
    }
</style>
